<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>tab切换</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">

</head>

<body>
    <div class="contianer">
        <div class="menu">
            <ul class="clearfix">
                <li class="tab active">关注</li>
                <li class="tab">推荐</li>
                <li class="tab">热榜</li>
                <li class="tab">视频</li>
            </ul>
        </div>
        <div class="content">
            <div class="main selected">
                <div class="main-box">
                    <p>环岛左转有风发表了文章·10 天前</p>
                    <h3>2024平板电脑选购避坑指南，适合打工人的多场景多需求高性价比平板推荐!</h3>
                    <div class="text">
                        <span>
                            作为一个互联网民工，平时经常需要处理工作问题。笔记本太沉，手机画面太小，平板小小一个刚刚好，再加上外接键盘，一整个就是我的随时随地加班利器。趁着最近.作为一个互联网民工，平时经常需要处理工作问题。笔记本太沉，手机画面太小，平板小小一个刚刚好，再加上外接键盘，一整个就是我的随时随地加班利器。趁着最近.
                        </span>
                    </div>
                    <div class="job">
                        <button class="btn">赞同5</button>
                        <button class="btn"> 88</button>
                        <span class="pinglun">10条评论</span>
                        <span class="share">分享</span>
                        <span class="love">收藏</span>
                        <span class="jubao">举报</span>
                    </div>
                </div>
                <p class="main-footer">还有 3个 环岛左转有风 的动态被收起</p>
            </div>
            <div class="main">推荐</div>
            <div class="main">热榜</div>
            <div class="main">视频</div>
        </div>
    </div>

    <script src="index.js"></script>

</body>

</html>